<template>
  <div class="Main">
    <nav>
      <div class="topA">
        <div class="topAW">
          <div @click="beWriter">成为作者</div>
          <span>|</span>
          <div @click="writerLogin">作者登录</div>
        </div>
        <div class="topAU">
          <li v-if="isLogin == false">
            <div @click="zhuce">注册</div>
            <span>|</span>
            <div @click="deng">登录</div>
          </li>
          <li v-if="isLogin == true">
            <div class="userMsg" @click="thisUser">
              <li>
                <img :src="this.$store.state.userData.userAvatar" alt="" />
              </li>
              <li>你好{{ this.$store.state.userData.userName }}</li>
            </div>
            <span class="userMsg">|</span>
            <div class="userMsg" @click="outLogin">退出登录</div>
          </li>
        </div>
      </div>
      <div class="topB">
        <el-row>
          <el-col>
            <input type="search" class="search" v-model="searchBookName" />
            <li class="el-icon-search" @click="searchBook()"></li>
          </el-col>
        </el-row>
      </div>
    </nav>
    <main>
      <div class="topC">
        <div class="left">
          <div class="topCN"><li>作品分类</li></div>

          <div class="topCA" id="topCLA">
            <li
              v-for="(item, i) in bookClass"
              :key="i"
              :class="tuBiao[i]"
              @click="toclass(item)"
            >
              <i>{{ item }}</i>
            </li>
          </div>
          <div id="topCLB">
            <div class="topCN sou"><li>搜藏榜</li></div>
            <li v-for="(item, i) in shouList" :key="i" class="bang">
              <img :src="item.avatar" alt="" />
              <div>
                <h3 @click="tobook(item._id)">{{ item.bookname }}</h3>
                收藏数：{{ item.thiscollection | number }}
              </div>
            </li>
          </div>
        </div>

        <div class="in">
          <div class="topCN">
            <li @click="toBookHome('all')">全部作品</li>
            <li @click="toBookHome('noend')">连载</li>
            <li @click="toBookHome('isend')">完本</li>
          </div>

          <div class="topCA">
            <div class="block">
              <el-carousel>
                <el-carousel-item
                  v-for="(item, i) in thisLunBo"
                  :key="i"
                  :title="item.bookname"
                >
                  <img
                    :src="item.picUrl"
                    alt="404"
                    @click="tobook(item.bookid)"
                  />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="topCN"><li>公告</li></div>

          <div class="topCA"></div>

          <div class="topCRb">
            <div class="topCN size"><li>字数榜</li></div>
            <li v-for="(item, i) in sizeList" :key="i" class="bang">
              <img :src="item.avatar" alt="" />
              <div>
                <h3 @click="tobook(item._id)">{{ item.bookname }}</h3>
                字数：{{ item.size | number }}
              </div>
            </li>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  created() {
    if (window.sessionStorage.getItem("userName") != null) {
      this.isLogin = true;
    }
    this.getLunBo();
    this.getClass();
    this.getShou();
    this.getSize();
  },
  data() {
    return {
      searchBookName: "",
      isLogin: false,
      state2: "",
      thisLunBo: [],
      bookClass: [],
      tuBiao: [
        "iconfont icon-xuanhuan",
        "iconfont icon-qihuan",
        "iconfont icon-xianxia",
        "iconfont icon-wuxia",
        "iconfont icon-lishi",
        "iconfont icon-junshi",
        "iconfont icon-kehuan",
        "iconfont icon-xuanyilingyi",
      ],
      shouList: [],
      sizeList: [],
    };
  },
  methods: {
    //路由
    zhuce() {
      this.$router.push("/userzhuce");
    },
    deng() {
      this.$router.push("/userLogin");
    },
    beWriter() {
      let routeUrl = this.$router.resolve("/writerzhuce");
      window.open(routeUrl.href, "_blank");
    },
    writerLogin() {
      let routeUrl = this.$router.resolve(`/writerlogin`);
      window.open(routeUrl.href, "_blank");
    },
    tobook(id) {
      let routeUrl = this.$router.resolve(`/tobook/${id}`);
      window.open(routeUrl.href, "_blank");
    },
    toclass(na) {
      //console.log(na);
      let routeUrl = this.$router.resolve(`/bookclass/${na}`);
      window.open(routeUrl.href, "_blank");
    },
    thisUser() {
      let routeUrl = this.$router.resolve(
        `/thisUser/${window.sessionStorage.getItem("userId")}`
      );
      window.open(routeUrl.href, "_blank");
    },
    searchBook() {
      //console.log(this.searchBookName);
      if (this.searchBookName == "") {
        this.$message.error("输入不能为空");
      } else {
        let routeUrl = this.$router.resolve(
          `/searchBook/${this.searchBookName}`
        );
        window.open(routeUrl.href, "_blank");
      }
    },
    toBookHome(id) {
      let routeUrl = this.$router.resolve(`/bookHome/${id}`);
      window.open(routeUrl.href, "_blank");
    },

    //函数

    //获取轮播图
    async getLunBo() {
      const { data: res } = await this.$http.get("/home/homeLunBo");
      this.thisLunBo = res.data.pic;
      //console.log(this.thisLunBo);
      //console.log(res);
    },
    //获取分类
    async getClass() {
      const { data: res } = await this.$http.get("/data/getBookClass");
      this.bookClass = res.data[0].children;
      //console.log(this.bookClass);
    },
    outLogin() {
      window.sessionStorage.removeItem("userToken");
      window.sessionStorage.removeItem("userName");
      //window.sessionStorage.removeItem('userAvatar')
      window.localStorage.removeItem("userAvatar");
      window.sessionStorage.removeItem("userId");
      window.sessionStorage.removeItem("userState");
      this.isLogin = false;
    },
    //获取收藏榜
    async getShou() {
      const { data: res } = await this.$http.get("/home/shouList");
      this.shouList = res.data;
    },
    async getSize() {
      const { data: res } = await this.$http.get("/home/sizeList");
      this.sizeList = res.data;
    },
  },
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
  display: flex;
}
.Main {
  height: 2800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(206, 206, 231);
  //flex: 100;
}
//导航栏 搜索框
nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: rgb(237, 243, 217);
}
//状态栏
.topA {
  flex: 1;
  display: flex;
  //flex-direction: ;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  background-color: rgb(226, 221, 248);
}
//作者
.topAW {
  margin-left: 80px;
  display: flex;
}
.topAW div {
  margin-left: 6px;
  margin-right: 6px;
}
.topAW div:hover {
  color: blue;
  cursor: pointer;
}
//登录，注册，注销的外部包裹的li
.topA li {
  margin-right: 150px;
}
.topA li div {
  margin-right: 5px;
  margin-left: 5px;
}
.topA li div:hover {
  color: red;
  cursor: pointer;
}
.userMsg {
  display: flex;
  align-items: center;
}
.userMsg img {
  height: 50px;
  width: 50px;
}
.userMsg li {
  margin-right: 8px;
}
//搜索框
.topB {
  display: flex;
  flex: 4;
  justify-content: center;
  align-items: center;
}
.topB .el-col {
  display: flex;
  align-items: center;
}
.topB .search {
  height: 45px;
  width: 380px;
  font-size: 18px;
  border-style: solid;
  border-width: 1px 0px 1px 1px;
}
.topB li {
  height: 43px;
  width: 43px;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  background-color: rgb(247, 108, 108);
}
.topB li:hover {
  background-color: rgb(255, 55, 55);
}
//主体
main {
  flex: 9;
  display: flex;
  justify-content: center;
}
.topC {
  height: 100%;
  width: 80%;
  display: flex;
}
.topCN {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 25px;
  font-weight: 700;
  color: white;
  background-color: rgba(70, 68, 68, 0.8);
}
.topCN li:hover {
  color: rgb(247, 231, 8);
  cursor: pointer;
}
.left {
  flex: 2;
  display: flex;
  flex-direction: column;
  background-color: rgb(245, 183, 183);
}
.in {
  flex: 5;
  display: flex;
  flex-direction: column;
  background-color: rgb(187, 124, 124);
}
.right {
  flex: 2;
  display: flex;
  flex-direction: column;
  background-color: rgb(240, 177, 177);
}
.topCA {
  width: 100%;
  height: 300px;
  background-color: rgb(240, 195, 230);
}
#topCLA {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#topCLA li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45%;
  //flex: 1;
  font-size: 25px;
  font-weight: 500;
}
#topCLA li:hover {
  color: red;
  cursor: pointer;
}
.topCA .block {
  width: 100%;
  height: 100%;
}
.el-carousel img {
  height: 100%;
  width: 100%;
}
.topCLB {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sou {
  margin-top: 25px;
}
.size {
  margin-top: 25px;
}
.bang {
  width: 280px;
  min-height: 160px;
  padding: 3px;
  display: flex;
}
.bang img {
  margin-left: 15px;
  height: 136px;
  width: 102px;
  align-self: center;
}
.bang div {
  margin-left: 5px;
}
.bang h3:hover {
  color: red;
  cursor: pointer;
}
</style>
